<template>
  <div class="pie chart">
    <div class="head">
      <p class="line-title">
        <i class="iconfont" style="color: #FF9592; background: rgba(242, 109, 91, 0.15)">&#xe7fd;</i>
        <span>{{name}}</span>
      </p>
    </div>
    <div class="pie-chart">
      <ve-pie :data="chartData" :settings="chartSettings" :extend="chartExtend"></ve-pie>
    </div>
    <!-- 没有数据 -->
      <div slot="empty" class="empty">
        <div v-if="showEmptyTips">
          <i class="iconfont">&#xe707;</i>
          <p>{{ emptyText }}</p>
        </div>
      </div>
  </div>
  
</template>

<script>
import { pieCartApi } from '@/api/ConsoleApi'
  export default {
    name: "PieChart",
    data() {
      this.chartSettings = {
        roseType: 'radius'
      }
      this.chartExtend = {
        color: ['#95DE64', '#5FAEF4', '#FF9592', '#FEB062', '#FEDD4F', '#9BB4F3','#B78DF7'],
        legend: {
          show: false
        },
        series: {
          center: ['50%', '40%']
        }
      }
      return {
        chartData: {
          columns: ['类别', '占比'],
          rows: []
        },
        showEmptyTips: false,
        emptyText:'暂无数据',
        name:'用户分类统计'
      }
    },
    mounted() {
      this.pieCartData()
    },
    methods: {
      pieCartData() {
        let userdata =JSON.stringify(this.$store.state.user.user.info);
        userdata=JSON.parse(userdata);
        let guestcode =userdata.reguserno;
        let gscode =userdata.gscode;
        if(guestcode=="IHFFHJ86LC"){
          this.name='供应商地区分布统计'
        }
         pieCartApi({
          guestcode: guestcode,
          gscode:gscode
        }).then(res => {
          if(res.code=="0"){
            if(guestcode=="IHFFHJ86LC"){
              res.data.data.forEach(element => {
                this.chartData.rows.push({
                  '类别': element.flabel+element.percent+'%', '占比': element.counts
                })
              });
            }else{
              this.chartData.rows=[
                { '类别': '微信用户'+res.data.data[0].wxuserpercent+'%', '占比': res.data.data[0].wxuser },
                { '类别': '账号用户'+res.data.data[0].zhuserpercent+'%', '占比': res.data.data[0].zhuser },
                { '类别': '游客用户'+res.data.data[0].ykuserpercent+'%', '占比': res.data.data[0].ykuser },
                { '类别': '新增用户'+res.data.data[0].xzuserpercent+'%', '占比': res.data.data[0].xzuser }
              ]
            }
          }
          else{
            this.chartData.rows=[]
            this.setEmptyTips()
          }
        })
      },
      setEmptyTips() {
      setTimeout(() => {
        this.showEmptyTips = true;
      }, 300);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .pie {
    width: 30%;
    position: relative;

    .pie-chart {
      height: calc(100% - 80px);
      position: absolute;
      bottom: 20px;
      left: 0;
      right: 0;
      margin: auto;
      overflow: hidden;
    }
    .empty {
    margin: 0 auto;
    text-align: center;
    top: 50%;
    position: absolute;
    left: 50%;
    margin-left: -52px;
      i {
        color: #d7d6d6;
        font-size: 40px;
        display: block;
      }

      p {
        color: #999999;
        font-size: 13px;
        line-height: 30px;
        margin-top: -5px;
      }
    }
  }

  @media only screen and (max-width: $device-ipad) { 
    .pie {
      width: 100%;
      margin-top: 15px;
    }
  }
</style>
